/**
 * @param bannerbox id banner的id
 * @param sp class 小圆点盒子的class
 * @param bool 是否自动轮播 默认为false
 * @param time 延迟时间 单位ms 默认2000
 * @param direction 轮播方向 value: col row 暂无
 */
function banner(bannerbox,sp,bool,delay){
  this.bannerbox = document.getElementById(bannerbox);
  this.sp = this.bannerbox.getElementsByClassName(sp)[0];
  this.bool=bool;
  this.delay=delay||2000;
  var delay=this.delay;
  var Bannerbox=this.bannerbox;
  var Sp=this.sp;
  var Bool=this.bool;
  var bannerul = this.bannerbox.getElementsByTagName('ul')[0];
  var bannerli = bannerul.getElementsByTagName('li');
  if(Sp){
    var span = Sp.getElementsByTagName('span');
  }
  var left = 0;
  var startpointX = 0;
  var startpointY=0;
  var movetoX = 0;
  var translateX = 0;
  var num=0;
  var timer;
  init();
  if(Bool){
    autoPlay();
  }
  function init() {
    bannerul.innerHTML+=  bannerul.innerHTML;
    bannerul.style.width = bannerli.length * 100 + "%";
    if(Sp){
      span[0].className = "on";
    }
    bannerul.addEventListener('touchstart', touchstart);
    bannerul.addEventListener('touchmove', move);
    bannerul.addEventListener('touchend', moveend);
  }
  function touchstart(e) {
    e.preventDefault();
    clearInterval(timer);
    if(num<=0){
      num=bannerli.length/2;
    }else if(num>=bannerli.length-1){
      num=bannerli.length/2-1;
    }
    changeTransform();
    bannerul.style.transition = bannerul.style.WebkitTransition = "0s";
    startpointX = e.changedTouches[0].pageX;
    startpointY=e.changedTouches[0].pageY;
    left = translateX;
  }
  function move(e) {
    var newpointX = e.changedTouches[0].pageX;
    var newpointY = e.changedTouches[0].pageY;
    var deg=Math.abs((newpointY-startpointY)/(newpointX-startpointX))
    if(deg<=(Math.sqrt(3)/3)){
      movetoX = newpointX - startpointX;
      translateX = left + movetoX;
      bannerul.style.transform = "translate3D(" + translateX + "px,0,0)";
      bannerul.style.WebkitTransform = "translate3D(" + translateX + "px,0,0)";
    }
  }
  function moveend(e) {
    num = Math.round(-translateX / Bannerbox.offsetWidth);
    changeTransform();
    if(Bool){
      autoPlay();
    }
  }
  function autoPlay() {
    timer=setInterval(function () {
      if(num>=bannerli.length-1){
        num=bannerli.length/2-1;
        bannerul.style.transition = bannerul.style.WebkitTransition = "0s";
        translateX = -num * Bannerbox.offsetWidth;
        bannerul.style.transform = "translate3D(" + translateX + "px,0,0)";
        bannerul.style.WebkitTransform = "translate3D(" + translateX + "px,0,0)";
        if(Sp){
          for (var i = 0; i < span.length; i++) {
            span[i].className = '';
          }
          span[num%span.length].className = 'on';
        }
      }
      /*  num++;
       changeTransform()
       渲染速度快与读取速度
       */
      setTimeout(function () {
        num++;
        changeTransform()
      },50)

    },delay)
  }
  function changeTransform() {
    bannerul.style.transition = bannerul.style.WebkitTransition = "0.5s";
    translateX = -num * Bannerbox.offsetWidth;
    bannerul.style.transform = "translate3D(" + translateX + "px,0,0)";
    bannerul.style.WebkitTransform = "translate3D(" + translateX + "px,0,0)";
    if(Sp){
      for (var i = 0; i < span.length; i++) {
        span[i].className = '';
      }
      span[num%span.length].className = 'on';
    }
  }
}
